<template>
  <div class="box">
    <div class="main">
      <div class="sub-title">
        <img src="@/assets/images/hot.png" alt="" />
      </div>
      <div class="f jcsb">
        <div class="f1 hot-carousel-box relative">
          <el-carousel height="634px" arrow="never" ref="carouselRef">
            <el-carousel-item
              v-for="item in newsList"
              :key="item.newsId"
              @click="goPath('/hot')"
            >
              <img :src="item.fileAddress" alt="" class="hot-banner" />
              <div class="hot-carousel-title f24 tem">
                {{ item.title }}
              </div>
              <div class="hot-carousel-content f16 tem3">
                {{ item.subtitle }}
              </div>
              <div class="hot-carousel-date">
                {{ parseTime(item.releaseTime, "{y}/{m}/{d}") }}
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="f arrow-box">
            <div class="arrow mr10" @click="prev">
              <el-icon color="#111f2c" :size="12"><ArrowLeft /></el-icon>
            </div>
            <div class="arrow" @click="next">
              <el-icon color="#111f2c" :size="12"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
        <div class="more-box f column jcsb">
          <div class="f jcsb aic mb30">
            <div class="f20">更多资讯</div>
            <div
              class="f18 pointer"
              style="color: #f01414"
              @click="goPath('/hot')"
            >
              查看更多
            </div>
          </div>
          <div class="f column f1">
            <div
              v-for="item in newsList"
              :key="item.newsId"
              class="f pointer mb30"
              @click="goPath('/hot')"
            >
              <div class="hidden more-img">
                <img :src="item.fileAddress" alt="" width="128" height="72" />
              </div>
              <div class="f1 ml20 f16">
                <div class="more-title tem2">
                  {{ item.title }}
                </div>
                <div class="more-content">
                  {{ parseTime(item.releaseTime, "{y}/{m}/{d}") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { getNewsList } from "@/api/home";
import { parseTime } from "@/utils/util";

const route = useRouter();
const hotNews = ref({});
const newsList = ref([]);

const getNewsListData = () => {
  getNewsList().then((res) => {
    newsList.value = res.rows?.length > 5 ? res.rows.slice(0, 5) : res.rows;
  });
};

const goPath = (path) => {
  route.push(path);
};
const carouselRef = ref(null);
const prev = () => {
  carouselRef.value.prev();
};
const next = () => {
  carouselRef.value.next();
};

onMounted(() => {
  getNewsListData();
});
</script>
<style lang="scss" scoped>
.box {
  .main {
    width: 1154px;
    margin: 0 auto;
    padding: 25px 0 50px;
    color: #111f2c;
    .sub-title {
      display: flex;
      align-items: flex-start;
      margin-bottom: 30px;
      img {
        width: 161px;
        height: 26px;
      }
    }
    .hot-carousel-box {
      border-radius: 10px;
      background: #f7f8fc;
      overflow: hidden;
      .hot-banner {
        width: 100%;
        height: auto;
        min-height: 417px;
      }
      .hot-carousel-title {
        margin: 30px 30px 20px;
      }
      .hot-carousel-content {
        margin: 0 30px 15px;
        line-height: 24px;
        opacity: 0.7;
        height: 74px;
      }

      .hot-carousel-date {
        opacity: 0.7;
        margin: 0 30px;
      }
      .arrow-box {
        position: absolute;
        bottom: 30px;
        right: 30px;
        .arrow {
          border: 1px solid #929292;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 8px;
          background: #f7f8fc;
        }
      }
    }
    .more-box {
      width: 387px;
      background: #f7f8fc;
      margin-left: 23px;
      border-radius: 10px;
      padding: 30px 25px;
      .more-img {
        border-radius: 4px;
      }
      .more-title {
        color: #000;
        margin-top: 3px;
        height: 40px;
        line-height: 20px;
      }
      .more-content {
        opacity: 0.4;
        margin-top: 10px;
      }
    }
  }
}
</style>
